jQuery Effects for Designers, Rebuilt with Modern CSS and JavaScript
The jQuery tutorials that made Web Designer Wall popular in 2008 (slide panels, accordions, fade-outs, chained animations) now need no library at all. Native HTML elements, CSS transitions and a few lines of vanilla JavaScript cover every one of them, with better accessibility and no extra download.
This guide rebuilds the same ten effects with today’s platform features. Every snippet comes from one tested demo page, shown below, and each panel is numbered to match its section. You get the code, the reason it works, and the browser-support caveats.
Why you can drop jQuery for design effects
jQuery solved two problems: inconsistent browsers and missing animation tools. Both are gone. querySelector, classList and addEventListener replace $(), addClass and .click(). The Web Animations API replaces .animate() and the old Color Animations plugin. CSS handles hover and layout motion. The platform also gives you elements jQuery could only imitate: <details>, <dialog> and the Popover API.
Here is how each 2008 technique maps to its modern equivalent.
| # | Old jQuery effect | Modern approach |
|---|---|---|
| 1 | slideToggle panel | <details> with a ::details-content transition |
| 2 | animate opacity hide | Web Animations API, then remove() |
| 3 | Chained animate() | async/await on animation.finished |
| 4 | Accordion | <details name="…"> |
| 5 | Hover fades | CSS transition |
| 6 | Clickable block | Stretched-link pseudo-element |
| 7 | Show all / hide all | Loop over details.open |
| 8 | Color flash feedback | animate() on backgroundColor |
| 9 | Image swap gallery | Buttons plus View Transitions |
| 10 | Link-type icons | Attribute selectors and :has() |
How element selection works now
The skill jQuery taught best, picking the right element, transfers directly. $("ul li:first") becomes document.querySelector("ul li:first-child"), and $(".photo") becomes document.querySelectorAll(".photo"), which returns a list you can loop with forEach. Any CSS selector works, including :has() and :not().
Prefer CSS to do the selecting whenever the effect is visual. If a style can react to state ([open], :hover, [aria-pressed="true"]), you don’t need script for it.
If you are migrating existing code, this cheat sheet covers the jQuery calls you will meet most often:
| jQuery | Vanilla JavaScript |
|---|---|
$(".a") |
document.querySelectorAll(".a") |
$("#a") |
document.querySelector("#a") |
.addClass("x") / .toggleClass("x") |
el.classList.add("x") / el.classList.toggle("x") |
.hide() / .show() |
el.hidden = true / el.hidden = false |
.on("click", fn) |
el.addEventListener("click", fn) |
.each(fn) |
list.forEach(fn) |
.fadeIn() / .fadeOut() |
el.animate({ opacity: [0, 1] }, 300) |
$.ajax() / $.getJSON() |
await fetch(url).then(r => r.json()) |
1. Slide panel: use details and summary
The classic panel that slides open on click is a disclosure widget. The <details> element is exactly that, with keyboard support, a correct accessibility role and no JavaScript. The element works in every major browser and has been Baseline widely available since 2020, so you can rely on it (see MDN on <details>).
To animate it, target the hidden content with ::details-content and transition its block size. Browsers need to interpolate to auto, which interpolate-size enables.
<details>
<summary>What changed?</summary>
<p>Native disclosure, no script.</p>
</details>:root { interpolate-size: allow-keywords; }
details::details-content {
block-size: 0;
overflow: hidden;
transition: block-size .3s ease, content-visibility .3s allow-discrete;
}
details[open]::details-content { block-size: auto; }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
summary::after { content: "+"; transition: rotate .25s; }
details[open] summary::after { rotate: 45deg; }
@media (prefers-reduced-motion: reduce) {
details::details-content, summary::after { transition: none; }
}Support note: ::details-content is Baseline newly available (since September 2025, according to MDN). interpolate-size is not Baseline: MDN lists it as limited availability and experimental, so browsers without it open the panel instantly. That is a graceful fallback, because the panel still works. Always wrap motion in prefers-reduced-motion.
2. Disappearing effect: animate, then remove
The old animate({opacity: "hide"}) faded an element and set display: none. With the Web Animations API, you animate, wait for the finished promise, then take the element out of the DOM.
async function dismiss(el) {
const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
await el.animate(
{ opacity: [1, 0], height: [el.offsetHeight + "px", 0] },
{ duration: reduce ? 1 : 300, fill: "forwards" }
).finished;
el.remove();
}fill: "forwards" holds the final state so nothing flashes back before removal. Element.animate() is Baseline widely available. If you would rather keep the element and just hide it, CSS can now transition display too, using transition-behavior: allow-discrete and @starting-style, which reached Baseline in 2024.
3. Chained transitions with async/await
jQuery’s chain of .animate().animate().slideUp() ran each step in a queue. Today you write the same sequence as readable, top-to-bottom code. Each animate() returns an object whose finished promise resolves when it ends.
const box = document.querySelector("#box");
const step = (keyframes, duration) =>
box.animate(keyframes, { duration, fill: "forwards" }).finished;
document.querySelector("#run").addEventListener("click", async () => {
await step({ translate: ["0 0", "240px 0"], opacity: [1, .3] }, 700);
await step({ translate: ["240px 0", "240px 40px"], scale: [1, .5] }, 400);
await step({ translate: ["240px 40px", "0 0"], scale: [.5, 1], opacity: [.3, 1] }, 600);
});Use the individual translate and scale properties instead of one transform string. They animate independently and are easier to compose. For a purely declarative sequence, CSS @keyframes with percentage stops works too, as shown in our @keyframes guide.
4. Accordion: one attribute
Both of the old accordion tutorials relied on hiding siblings with script. Give several <details> elements the same name and the browser enforces “only one open at a time” itself.
<details name="faq" open><summary>What changed?</summary><p>…</p></details>
<details name="faq"><summary>Is it accessible?</summary><p>…</p></details>
<details name="faq"><summary>Which browsers?</summary><p>…</p></details>Style it with the CSS from step 1. If you are building on a framework and want ready-made markup, browse the Bootstrap 5 FAQ accordion or the plus/minus accordion.
5. Hover effects are pure CSS
The two hover tutorials used jQuery to fade elements in and out because CSS transitions did not exist. They do now, and they run on the compositor thread, so they stay smooth. Transition transform and opacity where you can.
.tile { transition: transform .25s, box-shadow .25s; }
.tile:hover { transform: translateY(-4px); box-shadow: 0 12px 24px #0003; }Hover does not exist on touch screens, so never hide essential information behind it. Our guide to transitions and transforms goes deeper, and the product card with hover zoom is a working example.
6. Make an entire block clickable
The jQuery trick copied a link’s href into window.location on click. That breaks middle-click, right-click, and screen readers. Use a stretched link instead: one real <a> whose pseudo-element covers the whole card.
.tile { position: relative; }
.tile a::after { content: ""; position: absolute; inset: 0; }The link keeps its normal behavior, and the card needs only one tab stop. Keep the link text meaningful, such as the article title, rather than “Read more”.
7. Collapse all and expand all
The Gmail-style message list is a stack of <details> from step 1 (the “Collapse all / Expand all” panel in the demo). A “collapse all” control needs a few lines of script, because it changes many elements at once:
const panels = document.querySelectorAll(".message-list details");
document.querySelector("#collapse-all").addEventListener("click", () => {
panels.forEach(d => (d.open = false));
});
document.querySelector("#expand-all").addEventListener("click", () => {
panels.forEach(d => (d.open = true));
});Do not use the name attribute here, since you want several panels open together. For a list that reveals extra rows, toggle the hidden attribute and update a button’s aria-expanded so assistive technology hears the state change. The collapsible comment section shows a finished version.
8. Comment moderation feedback
The WordPress-style backend flashed a row yellow or green after an action. That needed the Color Animations plugin because jQuery could not animate colors. The Web Animations API animates them natively.
document.querySelector("#comments").addEventListener("click", e => {
const action = e.target.dataset.act;
if (!action) return;
const row = e.target.closest(".row");
const flash = color => row.animate({ backgroundColor: [color, "#fff"] }, { duration: 700 });
if (action === "approve") { row.classList.remove("spam"); flash("#dafda5"); }
if (action === "spam") { row.classList.add("spam"); flash("#fff568"); }
if (action === "del") { dismiss(row); }
});This uses event delegation: a single listener on the container, with e.target.closest(".row") finding the row that was clicked, so rows added later work too. It reuses dismiss() from step 2. Replace the old alert() confirmation with an undo option, or a <dialog> if the action is destructive. Color alone should not carry meaning, which is why the spam state also strikes through the text.
9. Image gallery with View Transitions
The “image replacement gallery” swapped a large image when a thumbnail was clicked. Build the thumbnails as real buttons, mark the active one with aria-pressed, and wrap the swap in a view transition for a smooth cross-fade.
<img id="stage" src="lake.jpg" alt="A calm lake at sunrise">
<div id="thumbs">
<button aria-pressed="true" data-src="lake.jpg" data-alt="A calm lake at sunrise"><img src="lake-thumb.jpg" alt="Lake"></button>
<button aria-pressed="false" data-src="forest.jpg" data-alt="Sunlight through a forest"><img src="forest-thumb.jpg" alt="Forest"></button>
</div>const stage = document.querySelector("#stage");
const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
document.querySelector("#thumbs").addEventListener("click", e => {
const thumb = e.target.closest("button[data-src]");
if (!thumb) return;
const swap = () => {
stage.src = thumb.dataset.src;
stage.alt = thumb.dataset.alt;
document.querySelectorAll("#thumbs button")
.forEach(b => b.setAttribute("aria-pressed", b === thumb));
};
if (document.startViewTransition && !reduce) document.startViewTransition(swap);
else swap();
});#stage { view-transition-name: stage; }By default, startViewTransition() cross-fades the whole root, which would fade the page around the image too. Giving the image its own view-transition-name limits the animation to that element. Same-document view transitions are Baseline newly available, and the if check, which also respects prefers-reduced-motion, gives older browsers and sensitive users an instant swap. For a full-screen lightbox, look at the modern lightbox tutorial or the gallery with lightbox snippet.
10. Style different link types with CSS alone
The original used jQuery to add classes to external, PDF and email links. Attribute selectors do it with no script, and :has() lets you skip links that wrap images.
a[href^="http"]:not(:has(img))::after { content: " \2197"; font-size: .8em; }
a[href$=".pdf"]::before { content: "PDF "; font-size: .7em; font-weight: 700; }
a[href^="mailto:"]::before { content: "\2709 "; }Generated content is announced inconsistently by screen readers, so treat these icons as decoration. For a link that opens in a new tab, say so in its visible text.
When you still might want jQuery
If you maintain a legacy site, WordPress admin screens or a plugin that depends on it, leave jQuery alone and migrate piece by piece. For new work, there is rarely a reason. Reach for a library like Swiper (carousels) or GLightbox only for features that are hard to build, and keep simple disclosure, hover and fade effects native.
Quick reference
- Show/hide content:
<details>, and<dialog>orpopoverfor overlays. - One-open-at-a-time: shared
nameon<details>. - Animate elements: CSS transitions first,
Element.animate()when you need sequencing. - Animate to
autosize:interpolate-size: allow-keywords, as a progressive enhancement. - Swap content smoothly:
document.startViewTransition()with a feature check. - Always honor
prefers-reduced-motionand keep keyboard focus visible with:focus-visible.
Yeah. Big thank You ! I always wanted to look at jQuery, but you gave me the Kick. Great article !
Love me some jQuery. I use it all the time on “side jobs”, personal projects, and even at work at my “real job”. Truly is “write less, do more”. Your explanations are clear and concise, hopefully it will get more designers into using it!
Fantastic article! Encouraged me to finally venture into the world of jQuery
Really useful summary of jQuery essentials.
Keep up the good work!
I have been looking for designer focused jQuery tutorials, and this tutorial is probably the best one around, even the ones on https://learn.jquery.com/ don’t help, but this one is excellent.
Thanks a lot Nick!
Thanks! ..this is exactly what I’ve been looking for, great for beginners too.
Keep the good work!
There is a little problem with the things that slide up/down (examples 4a, 4b, 7) These things jump a little bit when you open and close them. They start to slide about half the way down (or up) and then open up immediately, making the animation jumpy.
To solve this problem you must give the content that slides open (for example the ) a width via css. This width must be the same or smaller like the surrounding box.
The problem is, jquery seems to calculate the height of the surrounding box for the animaton wrong. It doesn’t use the width of the surrounding box for the content. It just uses the width of the content and if that is not given it assumes it to be width:100% which causes the problem in a with more then one line of text.
The problem can also occur when you use a margin-top margin-bottom. I think it’s better to use a padding.
Great mind’s think alike? I’m currently working on a simple introduction to jQuery for my blog. Glad to see others out there doing the same, getting the word out on jQuery!
Cheers
AWESOME!
Thanks for all man! jQuery is fantastic and this tutorial too…
explanation perfect, go direct the point! =D
Hi thanks a lot for this tutorial!! It is very helpfull an one of the best JQuery tutorial i ever read.
Very nice explanation of jQuery from a perspective that designers care about. A++ tutorial.
Brilliant tutorial. Just what I’ve been looking for. As a designer, JQuery has been my library of choice for interaction. May I also suggest the excellent tutorial on zebra striping on the JQuery website? Although it’s written for tables, the format can easily be repurposed for ordered and unordered lists. I’ve used it on countless websites to get that odd even striped look without any fuss. No fuss, no muss.
This is a great tutorial about a great Javascript framework. I recently started writing mini tutorials about jQuery for designers also. I just glad to see others in the community committed to helping others like themselves.
Awesome tutorial I’ll keep up the great work.
Good stuff. It’s always good to learn JS/AJAX, but Jquery is admittedly, one of the easiest frameworks to pick up.
Great tutorial…only thing I seem to be pondering is how to get all of these ideas/scripts to function with each other. If you want to implement one jQuery script for your nav and another for portfolio purposes, in my experience, typically I can only get one to work and the other will break. And forget about implementing mootools. Maybe I just need to read more on this stuff to find out how to make them all play happy with each other. Again, great tutorial!
Very, very nice tutorial!
But in one of the first exemples I would clarify the $(“ul li:first”) exemple.
In CSS the selector ‘ul li:first’ would select all the first <li>s of all the <ul>s in the page. But jQuery select as folows:
$(“ul li:first”) = get the first <li> of the first <ul> in the page.
To select with jQuery the seme elements as the CSS would select you can do:
$(“ul”).find(‘li:first’) = gets all the first <li>s of all the <ul>s in the page.
@Danny — try building your cases (search patterns and their associated actions/behaviors) into JSON objects. Then build some general purpose functions and do all of your customization within the JSON blocks.
I noticed the tiniest odd glitches here and there for IE7. Are these supposed to be completely prod-ready?
Didn’t know this library XD
I love u, I’m gonna use it on my website :P
Nick, as per usual, you are a legend. I’m gonna sit down with a nice cup’a tea tomorrow and go through your tutorial thoroughly.
I’ve been trawling jquery forums recently to learn more, but they are seem to be from a perspective of the reader having a decent knowledge of JS – which I don’t! Cheers for this (”,)
Thanks for the great tutorial. You made it so clear, I finally get it. I have been trying jquery, but I was missing something. This really helps.
Thanks for this! It must have taken me all day to get a simple accordion working on an old site, I’m glad I can always come back to this when I need javascript to do sexy things ;)
Thankyou very much!
This will really help me in making my websites!
:twothumbsup:
Thank you, thank you, thank you. Been tryin’ figure out JQuery, looking for easy-to -use examples. So this article is spot on. :)
Hello Nick.
This is a great start with jQuery for me, but how do I send these functions dynamically generated divs? Suppose there are product IDs, and when you click them, the rest of the information is animated into visibility. Right now I’m using Prototype for this, but it is simple show and hide, no animation.
Thanks.
This is a great introduction to jQuery! Thanks for posting all these examples. Now I have a much better idea of how jQuery works and what can be achieved with this.
All libraries suck! Why don’t make it yourself?
Thanks you (again) for sharing these nick, excellent, vote for button hover effects but accordion run unsmoothly :)
hi, can i do this for a wordpress blog¿?
Is there a way to add a text description to the image replacement (# 9)?
Hey Nick, this is great, I have been looking for some designer oriented jquery tutorial like this. Thank you for all the time you put in this.
Thanks a lot for this brilliant tutorial. So far I stayed away from anything Javascript. But this looks all so great! And so simple! I really need to have a play with it!
That’s really great, I’d love something on degradation where the user has javascript turned off.
I am having some trouble viewing some of these in Fire Fox?
Is that normal?
Very good tutorial! :)
Always have been a “fan” of Mootools — now i´m getting slowly into jQuery.
Great tutorial. I hope we will see more about jQuery.
Thanks
Nice tutorial. I translate it on Russian. Again … ;)
Great tutorial, great explanations and it’s easy to follow. I prefer Mootools myself as I like the modular structure and a lot of scripts I use are based off of the framework but you’ve got me interested in checking out jQuery ( I am aware mootools can do mostly the same things )
Thanks for share. It’s a good tutorial. The examples are the best. Thanks! ;)
QUESTION: in the Entire block clickable. can someone tell me how to make that link to open a new window? The equivalent of target=”_blank” in html.
thanks for this tutorial, I’ve been nagging my brains on how I’ll be able to use the jQuery and come up with a design for my personal site. I can only learn so much.
Hi, first I want to say thank you for this great tutorial. I was playing around with
the Image replacement gallery code and I was able to make the images fadeIn and out, when you click on a thumbnail. And I thought I would post it back for anyone to use. But I guess it will not let me. Is there anyway I can give it to you? Otherwise thanks for a great site, and the tutorials.
Wow, thanks for this nice tutorial! will be handy for future work. keep up your awesome stuff. :)
Great stuff Nick. Just a suggestion. For your accordion menu, or even your collapsible panels stuff, removing the padding from the item that will collapse, and adding it to a nested element, should remove the herky jerky movement and make things a bit smoother. For example, in your accordion:
<p style="display: block;">Lorem ipsum ....</p>
change to
<p><span style="display: block; padding: 10px;">Lorem ipsum ....</span></p>
and remove the padding associated with the accordion paragraph(s) from your styles. Also, a paragraph is a block level element, therefore it isn’t necessary to define the display as block.
Again, great stuff. Your work (and your commitment to your work) is truly amazing.
Thank you very much for this page, it was good to see some JQuery in action and understand what you can do with it, it was really helpful and refreshing!
Thanks!
Thank you for sharing! This jQuery tutorial is just the ticket. Kudos!
I just started learning and using jQuery. It’s a lot of fun. I’m using it to create a WordPress theme now. It’s going to be great.
Thanks for this great tutorial! It can be handy for my future works.
Cheers from Brazil!
Really good tutorial, thanks! I am just moving across from Prototype to JQuery and this is going to be very useful! ;-)
thanks for the overview, but how do i make the slide panel slide horizontally (say from left to right)?
Great tutorial as usual… really awesome work… Too bad I live in a place where IE6 still greatly used if not IE5 -.- so some of the effect don’t work quite well…
Very nice tutorial and insight to jQuery.
Thanks for sharing!
Hi. I have a question. I know the question doesn’t match to this post.
In which software you draw web designs?
Nice tutorial. I learn lot from reading this tutorial. It’s better if you can provide more tutorials relevant to CSS. Thanks!
I forgot to tell in previous comment that animated hover, clickable blocks and link types snippets are very useful and I hope to use those things in my future project.
Great Tutorials! I’ve been looking for something like this. Would you know how to achieve ( or where to find) an effect like the one mint.com displays on their home page?( “why will you love mint”) It’s the animated sub nav at the bottom of the page, where the copy fades in with each section?
Thanks again for the great tutorial.
Wow, awesome tutorials/resources. These look easy to implement and can make any website stand out.
Also, great work on the site, love the whole hand-crafted style of it. Keep the awesome resources coming.
Thank you very much for a very interesting tutorial! You have a beautiful site just perfect! I have found for themselves and for my ideas a lot of new and interesting
Great tutorials! These look good I well try them out , I have been using Adobe Ajax spry which I would recommend to any. Also there is moo.fx and scriptoluse
Thanks
Thank you so much for the awesome tutorials! I’ve got a question for you.
In the clickable block tutorial, is there any way to include/incorporate that behavior from the :hover pseudo class into the js? I’m trying to make the effect compatible with IE6 (I know, shoot me LOL.)
Thanks in advance :)
Very Nice!
Im going to try and use the Gallery one i believe its #9.
For my portfolio.
Hey Nick La your website looks awesome. Its my personal favorite right now. The jQuery tutorials were real helpful, it was about time I got up on this stuff. I’m already a jQuery’in fool, it’s so easy if you already know Javascript/CSS, I had no idea.
To answer Miami Web Design’s question, you can attach the hover stuff in jQuery with .hover(). This would be called in the same way as .click(), for example:
$(“label”).hover(function() {
$(this).addClass(“hoverClass”)
});
This works just fine in IE 6.
http://www.jonraasch.com
Awesome post as always, but this is definitely your best yet!
=D
How would you save the state of the accordion as you change from page to page? I know it would involve some hard work, but I have no idea where to begin.
Wow thanks for the great tutorial. Its relly wonderful. Keep up the good work.
Are there any SEO issues that are raised by using JQuery? Hiding text off page etc? I’m interested in the sliding panel, but have concerns over whether or not it might be deemed ‘Blackhat’?
Soz if this is beyond the remit of this page.
This is amazing. The tutorial is nice visually, and it’s pretty detailed and helpful. It’s easy to understand. I’m using the sliding panel one now as well as a different one for scrolling back to the top of the page. I was wondering though, if there’s a way to put that code in a js file instead of directly in the header.
Great tutorial! The image replacement script can be further customized to have the thumbs to the left or right or above the large image by changing the location of the … to various parts relative to the large image. Good work! Look forward to seeing some more!!
Estupendos ejemplo y de gran ayuda para todo tipo de aprendizaje. Felicitaciones.
Soy Juanjo desde Argentina. Hasta pronto.
Wow… what an awesome tutorials and resources for the web designer. However, my company is using SAVVY.UI as it is develop by our programmer. So, I don’t think I can learn this one. But still want to say thank you as you give me a clear concept about it.
This is a great stuff. Thanks for the demos and downloads, this stuff is looking really amazing and is easy to implement in a html page, thanks a lot. :)
how can I apply two of these rules together, let’s say i want to use the accordion effect on one part of the page and i want to use the Simple slide panel on the same page but on different elements.
great tutorial.
Great tutorial. Unfortunately, I put a table inside of the accordion, it works in explorer but does not work in Firefox, Safari, or SeaMonkey. Is there something that I can do to make it work?
i figured it out…
now i need to figure this out…
what if i have 2 paragraphs in the first pane, how can I make that work? since the second paragraph disappear once the panel has been clicked.
Excellent article as usual. I’m a bit of a MooTools fan myself, but I have been meaning to have a bit more of a play with jQuery.
Thanks
Great job. I have added the animated hover to my website and it works well. However, I can’t get it to work on a page that I have either a lightbox image script or a mootools image script. Anyone know what the possible fix would be?
all the best,
Joe
I think I will try this examples. THX for it!
& I hate IE, too :)
Nice set of tutorials. I’m fairly new to jQuery, but making entire panes viewable was something I was meaning to figure out how to do. Cheers.
This is really one of the Gretest articals which i have refered.
I would like to use these examples in my current project. If u have any more example… please share with me.
Thanks & Regards
Bhargav
Great tut Nick, I have just recently been diving into jQuery as a design extension, and some of these effects are the exact ones I was wishing to use. Thanks for the help!
Thanks for the tutorial – just saved my bacon. I was having trouble with the jQuery accordion plugin and it turns out the simple script up top works a treat. Thanks again,
Thanks for these nice tutorials. First time I am really thinking about using JavaScript for Design…
hgsert yi_çà-è zehbh'” rtyy(u ssdahujy ju
Thx very much for this site.I learned the jquery here.And I am a css and javascripts fans.You kown,my English is poor,as I’m a chinese.I have a site about css and javascrpits,it’s named ‘s do css forever….
Hi Nick. Really nice tutorials. Before I stumbled into this post, I was choosing between mootools and jquery but when I saw this, I know what I have to use now. Jquery is so much easier to use for designers who isn’t really much into backend coding. I mean mootools is lighter but mootools is far too advanced for me. Thanks so much. I appreciate this effort of sharing your knowledge to other designers out there. Long live Nick La.
Hi Nick, it’s realllllllllllllllllyyyyyyyyyy nice work, this is the best work forever which i have seen in JS. Thanks to show the power of JS (jquery)
I can’t get number 1 “Simple slide panel” to work. Where should I put all the files? Can someone help me via aim ? my screenname is andreeblixt.
Thanks!
From my blog.
Eighth – Probably the best JQuery tutorial I’ve seen on the internet. Not only does it simply explain how JQuery works (thank god!), but it provides 10 useful examples that are easy to implement in any web site.
I’ve said this once and I’ll say it again – Nick La is an absolute gem.
Great stuff, Nick. It would just be awesome if these were in the plugin repository over at jquery. All of these are just excellent work. Your visual stylings are “World class”!
Very nice and helpful! I’m totally using these! But I have 1 question: In the Simple slide panel, is there a way to have the panel out by default when the page loads? Instead of starting out collapsed, can I make it start out expanded? Thanks! C ya later.
Thank you for these wonderful tutorials. I just discovered jQuery and I must say it’s apsolutely amazing. It’s actually FUN to code in because it’s sooooo easy!
Thanks again,
Regards,
James
omg nice tutorial i used in wordprees and work very good
Hey, i’ve been your website die hard fan since your first post. However, there is something i would like to know. How did you put those right or left image (125x125px size) on each of your post (homepage), while on each post (single post) the image does not exist? Do you use any special plugins? Love that feature!
Hi,
I’m trying to get the Animated hover effect #2, but I can’t.
See the code of my menu-list (here).
Can you please help me?
Wow what a great tutorial for jquery, i used to learn for mootools hopefully you can share for mootools as well. Anyway this is very useful for most designer and web developers, applying this new way concept.
Just started getting into jquery and this excellent tutorial is a great find. Only problem I am having is with the 2nd animated menu hover – by using the “title” tag you are invoking a tooltip which then displays as well as the animation. Is there a workaround?
Never mind. Fixed it. Switching title to id works but doesn’t validate. Class does ;-)
Nick – love all of the how-tos. I would love to see different ways of styling menu navigation. How do you suggest?
hi,
i was using the hover effect explained here for my wordpress navigation. But i cannot see any effect. IE7 shows it as – “object expected error”.
Please help me out…
thanks in advance
I am so glad I found your site. I’m just learning and was frustrated with jquery but your tuts are great and now I’m going to have fun with designing my website. Have a great day!
I really like the Simple slide panel. But I want to use it more than 1 time on my page. How can i make this work?
thank you for the awesome tutorials, I love the cross-browser functionality of jQuery, all the available effects are sick if used in the right way.
:)
David
Pretty funny… This “tutorial” is pretty much a copy+paste of the jQuery documentation page… Pretty shameless rip off…
The author’s got talents, the blog design’s fun… it’s too bad so much stuff on this blog is recycled from other places with added drop shadows, it stinks of adsense speculation a lot more than it feels like the author’s genuine desire to spread knowledge and help people.
It’s become all too common on the web… remember the “information super highway”? ha ha… it’s been replaced by money, money, money, everything, everywhere.
@author: spend less time looking at your stats and come up with ORIGINAL content. You can do it…
@wack – get over yourself you idiot. I visit this page as a quick reference far more often than the jQuery doc site. Take your blog envy elsewhere.
Love the tutorial, but does anybody know how to get the div to overlap content, and not push it down?
Just want to add praises for this great introduction to jquery. It helped me to make that 1 step and it is very rewarding.
Thank you
Great stuff! I will be experimenting with jQuery after reading this. Excellent
CSS is very powerful with jQuery, this is nice article..
this is great help for me, thanks..
in the case of the slide panel, is it also possible to get it to slide by simply hovering the button?
jQuery interferes with the lightbox script. Any ideas how I can fix this? I really need this drop-down menu (slide panel menu). Please, it’s urgent.
Seth, the Scriptaculous and Prototype javascript libraries don’t play well with Jquery so you can’t use them together.
Why does the Hover effect only work if the link is inside a list?
Straight to my favorites, great stuff. I will be testing it tonight and report back if I see any problem. thanks
Great Stuff! I saw that the accordion technique does not work in IE 6 though. Anyway around this. The arrows are not clickable.
Hello, this web is genial!
I need the same code that example 9, but with videos?
Could you help me, please?
Cool! Just so you know with your accordion demo, the reason it’s buggy is because you are using padding. The accordion effect hates padding and gets all buggy around it.
Just use margins instead.
Hey there,
Is it possible to combine the two demos: chain-able transition effects and Image Replacement? I would like to build something like that: Pretty much that what you built in the Image Replacement Demo. But I want some animations. The Images should fade out then change the largePath and the fade in again. I tried to chain those three arguments but it doesn’t work. the Image changes before it fades out. Could you explain me how to build it? Thanx.
Thanks Sam, but I removed the padding and the arrows still are not clickable in IE 6.
With the menu and the hover over animated things in 5b. Is there anyway to have them centered rather than having padding. The reason being is that if used on a buttons with different width, it looks all screwed up :(
Many Thanks Nick
The image replacement gallery is exactly what I was looking for, for an upcoming project. To delicious this page goes! Thanks! :D
Good menu source code for my next web development work.
thanks for this cools stuff. i’m a complete newbee. is it possible to “grap” foreign content (e.g. google spreadsheet pages) an replace the css use there?
One of the best jquery tutorials I’ve seen yet… thanks for the tips!
Hi,
In the animated hover examples the transparency doesn’t work immediately in IE7.
A black outline surrounds the png’s when first rolled over…is there a fix for this?
anyone have any ideas on the best way to add a preloader animated gif to “image replacement gallery”?
Amazing post, we can use this in our next work…Thanks!
#230 – Hi Janice
GIFs and JPGs work, but the graphic might require some adjustment if you wish to retain the drop shadow effect. If your ’em’ hovers over a solid colour (white in the example), setting the matte of the graphic to it should do the trick. Bear in mind that IE6 for example ‘doesn’t like’ PNGs so one should make available an alternative graphic anyway.
i cant seem to download jquery right. i downloaded into my computer but it won’t open it keeps saying ” ‘window’ is undefined “. so im really confused.
Hi I am using “Collapsible panels” code with Asp.net 3.5. When I am placing the ol inside a “Updatepanel” the jquery functions are not working at all. Could you please tell me what is the problem?
Mind blowing, excellent….worked with jQuery for some time but never ever thought of doing anything so wonderful with it…thank you for expanding my options.
Keep up the good work and your service to the tech community
Yours gratefully,
Thanks for your efforts, realy beautiful and neat tutorial. I guess I’ll start to learn jQuery from this article.
I don’t understand why you would use jQuery or javascript to link block elements. It’s much simpler to use CSS to set the child anchors to block with 100% widths and heights, and then the browser can open them in new tabs.
hey dam gud work . i wana see ur all of creativity work .i like ur work .it;s imazing
Hi there,
Awesome Tut! I’m having a bit of problem when I insert flash content within one of the collapsible panels of the accordion, it is embedded within the tag. Anyway, it seems to work flawlessly in safari, but not in FF – the flash content is within a simple tag.
any ideas of what I can do to fix this?
I agree.
It’s very nice :) Good work. Thanks.
Amazing tutorials mate…especially of me who is a newbie in JQuery :P
Thanks a lot… : )
I don’t understand why you would use jQuery or javascript to link block elements. ?
This is a fantastic website. Keep up the good work.
On the Animated hover effect #1 Is there anyway I can add different images to each menu button?
Amazing post! I really needed something like this!
I’ve been having trouble for a whole day now on accordion, and you’re example is so easy to implement, thanks again!
Please make more of these jquery posts!
Having problems some problems with the ‘Simple Slide Panel” and IE7.
I’m trying to insert a jquery.validate contact form in the slide, but in IE7 the form is displaying the moment you press the slide (before it fully slides) and then stays there when you go to close it untill it’s fully closed.
I’ve added the following lines to the and css file (note-added #form_wrapper to function;
$(document).ready(function(){
$(“.btn-slide”).click(function(){
$(“#panel”).slideToggle(“slow”);
$(“#form_wrapper”).slideToggle(“slow”);
$(this).toggleClass(“active”); return false;
});
});
//css
#form_wrapper {
height: 150px;
width: 100%;
margin: 0px;
display: none;
}
As I am a designer and only a developing developer, I humbly request your help!
NOW, this list does not suck. Thanks a lot for the useful resources for jQuery.
Thank you so much for this free menu
Any way to make that accordian run more smoothly? Seems jumpy when you close a panel.
Thank you SO much for this! I now understand how jQuery works, and I cannot wait to implement it with my website’s new upgrade. It will be a huge “wow” to our members and guests!
i just found out how easy it is to integrate jquery-effects in my site, thx for the tutorial!
man… i cannot find how to integrated css to this… please write down full tutorial to integrate css to jquery thx…:( please
For “6. Entire block clickable”: Is there any way to make the link open in a new window?
Thanks in advance. :)
Thanks a lot ! Great tutorial for Webdesigners, this is a good start to learn jquery.
a great post for a basic intro to jquery… helped me out a lot and was a bit better in the example department than the jquery tutorials haha ye great!
Thank you for sharing your work, it’s very helpful and easy to use. A+
hi dear
how i can use collapsible-panels in wordpress to show my post ?
help me please
well great stuff mate!! excellent work which will surely help new comers like me
Thanks a lot buddy, you made me switch to jQuery ;)
Great JQuery tutorials for designers. Thanks man and keep up the good work
great tutorial really helped me with crossing to jQuery
What an excellent examples you have here. Bravo! I noticed that on Apple Start page “iTunes this week” section https://www.apple.com/, it has a fade in and fade out effect over the anchor link. I wonder is that done with jquery? I like to do something like that.
jQuery always seemed so intimidating, until now. Now I can accomplish a new project at work, thanks to this article. Thank you so much for sharing this. I’m overflowing with ideas now!
Very informative intro on jQuery. The design of this blog is also awesome.
Question about Animated hover effect #1 and #2.
When I hover many times it continues to fade in and out.
So I put stop (), just in front of .animate to stop it.
But it does not work. After hovering many times, nothing will come out.
Can anyone tell me how to solve this problem?
Thanks for the great demos. I love them.
I was looking for “Image replacement gallery” example for a long time, thank you for those examples.
This is great and helpful tutorial for beginners in jQuery Framework.
I was impressed by the easy manner and clear explanation ..
Thanks! :-)
Thanks for tutorial.
It’s a very quick start guide for jqueryframework.I will begin using jquery with your tutorial
Faithfully
quite well explained here… this tutorial has me very helped.
Awesome tutorial. I’m still a bit of a newbie, but I love jQuery. I just found this awesome jQuery Cheat Sheet for the iPhone today. It’s really great. I’ve only had it for a day and it’s already making my life a lot easier.
Looks like there’s also a CSS Cheat Sheet from the same guys.
Nice Article will help to do the work very well and having good example with. thanks for tutorial.
This is one of the clearest tutorials on jQuery I’ve read, thank you.
Thank you for posting this! I do have one question though. I tried wrapping the Coda Slider (http://www.ndoherty.com/demos/coda-slider/1.1.1/) script into the Simple Slide Panel div and it didn’t work. I know it’s a lot to ask, but would you please tell me how to get both scripts working simultaneously? The panel div won’t actually *wrap* around coda slider (ie. when you contract the div, it’ll slide up, but the coda slider will still be visible all the way up to the point when the panel div is completely collapsed). The coda slider also doesn’t function when both scripts are called, and I don’t know how to go about recoding that either. Any sage advice is much appreciated!
Hi,
I am trying to use multiple instances of the Simple Slide Tutorial on one page. I did this by giving each new slide panel a new id and class (#panel1, .btn-slide1) This worked fine using .click(function(), but when I tried to change it to hover.(function() only the first instance worked. I’m new to Jquery, is there any way to get this working? Any help would be appreciated!
Thanks,
Alicia
Thanks a lot for this tutorial..
I have i question regarding “Imitating the WordPress Comment Backend” example. From example show for static content so how about dynamic content. That means the comment got from database and the example explained for client side info..
tq
Please tell chain rule in jQuery as i am beginer
I like this a lot, especially the a:not attribute, I’ve never seen that. This might save me a few lines of code!
Wonderful tutorials about jQuery thx and greetings from de!
Found this site and have already implemented the simple slide panel.
Cheers!
I`m trying to use this w joomla & i need to call jQuery.noConflict();
how to use it then ?
These are very good tutorials. Has helped me a lot in my job.
Very nice information about JQuery. Now I am learning JQuery very easily.
Thanks for information.
Hello there,
I know it is more a CSS issue than jQuery but is there any way to move the slider (simple slider) to the right instead having it exactly in the middle of the page? I wish to move it 750px from the left border.
THANKS
Sig
Website design will never be the same without jQuery! Great tutorials .
This is a really good post in generall for people like myself who are just starting out with scripting like this, but I felt I should add that #6 can be achieved MUCH easier by simply wrapping the block element in a link. I do this all the time with basic html only–no javascript required.
1. Simple Slide Panel
I’m new to jquery and wanted to ask if it is possible to have multiple buttons on the slide panel? Anyone??? :)
I would like to know if it is possible to you the image gallery in example 9 and add a next/previous buttons to scroll through the thumbnails.
Excellent tutorials. Maximum impact with minimal effort, just what jQuery is about!
Allow me to be the 363rd person to say thank you. Really a great tutorial, and I appreciate the time it took on your behalf to publish it. Thanks again.
For Example 1, the slide panel, is there a way to have the background of the panel to be semi-transparent when it’s revealed?
That would be KILLER!!
Found a way!!
For those who want to know, add the following to your CSS, under the #panel id.
opacity: .80;
filter: alpha(opacity=80);
Just replace the 80 value with whatever you want… the lower the number, the more transparent it’ll be.
I want to let the panel close on mouse out instead of clicking button. What do i have to add in the script to fix this?
$(document).ready(function(){
$(“.btn-slide”).click(function(){
$(“#panel”).slideToggle(“slow”);
$(this).toggleClass(“active”);
});
});
Amazing article. My websites sped up by not having to include all sorts of libraries trying to (9/10 in a VERY complex way) achieve what you guys here can sum up in couple of very SMART lines! Respect ;) And thanks…
Hi,
This is cool. Thanks for posting. I was trying to use the 1st interaction but i was not able to move the clickable button “slide panel” to the right corner below the panel. Any help would be greatly appreciated.
Thanks,
Gulshan
hi all i need to add some ajax and jquery effect in ( about us ) page
i want to add effect to ( our history about 30 lines – and our works about 20 lines )
which technique to use
i meat i want to add some good effects to text i dont want it just formatted html
Good Work done……. the way you have presented the work flow of jQuery is really great…..
Best intro to jQuery that I’ve found.
Let me know if you do anything on using “editease” for content management!!!
Thanks for your hard work and a great looking website.
Keith D
Great write up. I would also like to share a jQuery resource with nice tutorials there: jQuery HowTo’s & tutorials. I hope you will find it useful !
excelente el diseño de página. Les felicito…
my congratulations
great tutorials indeed :) i was wondering if it would be possible, to have the “simple slide panel” on the bottom of a page. tried everything, but i cant get the button to show up on the bottom :( help would be appreciated :)
Web Designer Wall is always clear, thorough, and relevant. It has really helped me develop my style and skills.
Bravo!
hi love your tutorials i was wondering is it possible to make the simple slide panel slide up from the bottom of page instead.?
I would really appreciate some help, this would go great in our non-profit website which is being re-created now.
thanks a million
Hi i am a person in constant develop hehe! i hope i can understand all yours tutorials about jquery, i am beging in that world called javascript and web deleveloper, thx for all of thems…
Hi nice tutorials, It was very helpful for me to get some knowledge in jquery
thanks
hola me parese asombroso lo que uno puede hacer con ajax los felicito el tuturial es de grana ayuda
Thanks for dat but cant download the zipped files, if possible pls mail me,
Thank you for the wonderful stuff!
Great tutorial. If I want to fade out any element, do I need to include the effects UI?
Thanks for your nice tutorial
how do i hide a particular error message of a textbox on click of submit where the other error messages must appear except for 1 textbox??
can u please help me..
thanks in advace
How I add, in the example 9: image replacement, an specific link from each image?
Thanks for this great tutorial :D
very easy and effective tutorial to know something about jquery ……
very very useful :)
thanks for all the great work :D
As usual, a great tutorial and resources for all of us, I start loving JQuery! Thanks!
I don’t know why “for Designers” but this was such a great tutorial! Thank you very much for this one. I learned a lot about jQuery reading and trying to do the demo without looking what you did. Very nice.
Excellent tutorial on excellent site. BTW: your theme is amazing… Congratulation !
hi,
I like your site i m huge fan your article. i like your site very much.
i need some help for in this part
(1) 5a. Animated hover effect #1
(2) 5b. Animated hover effect #2
In FF work amazing but in ie 7 when i do hover stage some “black border” display around the box
can you help me how can i fix that ?
Thank you for sharing the tutorials! Awesome.
Been looking around for a simple thumbnail Picture Gallery, none of them are nowhere near SIMPLE as this tutorial. Very very nice.
plus, i got to learn a bit of jQuery. Thanks again. Site Bookmarked.
Excellent guide to figuring out how to use jquery! Thanks for the work that went into this and the great downloadable examples. You guys rock!
I’ve a little pb with the animated menu hover 2. I’ve the last version of Jquery, and i’ve read the tutorial but under Safari, it doesn’t work ! I shearch a solution but i don’t find it. I’ve moved javascript code from to but it’s the same thing. Someone have an idea ? (thank by advance)
helpfull tutorial with step by step guideline, it sure help.. im a designer and I love jQuery for work..
Nice It will help who are beginers in designing website with Jquery
Thank you, I’m just starting to learn the power of jquery and you have firmly provided a better idea of how I can use it effectively and inspired me to delve further.
Thanks
beautiful tutorials, I am big fan of jquery already, nice to get well explained new tutorials :)
Hey everyone, I really appreciate the great tutorials that you put out, but would it be at all possible to get a tutorial for real beginners – Right down to here’s how you generate your script source code or here’s how you append an external style sheet. Something like that would be amazing.
Awesome tutorials. They’ve helped me out design and code wise.
very nice tutorial. I have used this page alot as a reference when building JQuerystuff , keep up the good work m8 :)
ThanX to jQuery Team. It really superab and simplified everything as much as easy & use.
You have done good JOB!
thanks for the simple slide tutorial, if i want to customize the slide toggle(up/down) into (down/up) what is the code to make that effect? and how to make more that 1 slider in a page without breaking the other slider?
I have a issue about ‘Entire Block clickable’, when hovered he no show url in status bar, as well as a tag a, have how emulate this?
good work.I really didnt see anything better than this on jQuery
Dude! Best site I have found in AGES! Great work, pure brilliance.
All the articals are very nice.definiltly it will help to use jquery more easy.Thank you.Good work.
Nice tutorial i can easily use jquery now thanks
Fantastic work. I am new to web development in Java using Jquery. This tutorial has helped me alot and hopefully will help me alot in future. Thnkx alot.
Regards,
Asim
I want to use the JQuery number 5b. Animated hover effect #2
could anyone help me change the code so I can use 7 buttons instead of 3? I’m really new at web designing. Thanks for helping me.
Nice tutorial. Was looking for a great way of learning some JQuery.
Nice work as always.
Thanks
very good side!!! wonderfull effects
Greetings from de
I love these tutorials, and as a beginner there great to get an idea of how jQuery works.
I am new to all web stuff, and was wondering how do you make the block clickable bit horizontal?
i love this tutorial as a beginner….but can we do som data base related functionality using jquery?
Nice ..
For better understanding , you can have the explanation for JQuery
Utility methods which can be listed .
so it can be understood easily and try more .
This site would be helpful in building their own applications.
By assigning the
display:none;attribute in CSS to elements on a page you are preventing this content from being displayed in a browser that has JavaScript disabled and CSS enabled. I would suggest hiding these elements using the jQuery.hide()command instead, so that if JavaScript is disabled the elements will be permanently visible and accessible.Really Nice Tuts, All this stuff r very usefull in real life designin’ & programming with JQUERY
Thx Dude
Abraham
active class will toggle the background position of the arrow image
its awesome! i m so much thankful to u for this tutorial but i have one prob. i m getting effect to display msg but not colour full graphics so plz tell me how i will get those graphics
I don’t get tutorial 10. You say you HATE ie6, you should trash all ie6 hacks and then you provide a workaround for providing neat but unnecessary functionality for ie6. How about you JUST DON’T?
Great stuff!! Please consider to include how to do a toggle menu like the one wordpress have in the left of the profile page, that would be just awesome! Cheers!
Nice tuts. :)
I`m German and I used google for the translation :)
When I am at the numbert 1, with some annotations , #panel slips 10px down from the edge. I user Firefox 3.0.5. Bug?
Please help me!
its awesome! i m so much thankful to u for this tutorial but i have one prob. i m getting effect to display msg but not colour full graphics so plz tell me how i will get those graphics
Hey, with regards to the sliding menu, how do I assign a background image to the entire page because at the moment it isn’t working :(
Thanks.
Firstly thank you for that amazing post, i want to learn that: is there any way to use Simple disappearing effect for higher level grand-divs E.g:
// For class pane
I mean i want to control outer div of image’s placed.. Thanks right now..
I like these tutorials. Especially # 10, can you write more
Excellent selection of jQuery effects there. Top stuff, cheers.
Thanks a lot, you cover a lot of interesting issues when it comes to give real agility to a site. I think it can be really useful for my job here, in Spain.
#6 “entire box clickable” seems flawed, it uses li:hover.
Assigning psuedo-class of hover to anything other than is unsupported by most browsers. Is there a jquery hover effect?
Just what I need, one of the most comprehensive jquery tutorial around.
muy bueno los ejemplos jquery, (very good examples jquery)
thank you so much for amazing tutorials ! I must use it ;)
I like the jquery tutorial, I need some sample query like this
Good ideas! it looks simple even for me to use.
Girlfriend Dating
How can I transform the Simple slide panel to slide down/up on mouseover/mouseout ?????
Thank you very much for simplify the jQuery Understanding!
Great post. Especially that litte tiny part about KILL IE6 HACKS!
And while on it, KILL IE!
My god I hate that browser. 80% of my development time is wasted creating hacks for IE.
Good day, I tried out the jquery Accordion and it works, however when I click on the same item it bounces.
Here is the snippet of my jquery code:
if($(“#newsAccordion”)) {
//Fix for IE
$(“.newsArticle”).hide();
$(“.newsArticle:first”).show();
}
$(“.newsHeader h3”).click(function() {
$(“.newsArticle:visible”).slideUp(“slow”);
$(this).parent().next().slideToggle(“slow”);
return false;
});
And my HTML for this accordion follows the following hierarchy:
div#newsAccordion > div.newsHeader h3 > div.newsArticle
Any help would be greatly appreciated.
Hi all,
I want to embed cformsII via php insert in a Jquerry accordion, however this breaks the accordion (see point 1. Ersberatung).
Any help appreciated,
TIA
Oliver
URL:
cforms version: 11.0 – accordion out of the box as written in this tutorial
Wordpress version: 2.8.4 DE
Its great source of knowledge for any JQuery newbie.
Thanks a lot man!
Terminology FRBR offers us a fresh perspective on the structure and relationships of bibliographic and authority records, and also a more precise vocabulary to help future cataloging rule makers and system designers in meeting user needs. ,
Thanks for providing these samples. It’s really helpful for new JQuery developers.
Thank you for such an excellent tutorial.It really helped me a lot in jquery.
This is a great introduction into jquery with simple but useful demos. Thanks for sharing it!
A very good introduction to jQuery features.
great job!
hey
very very useful and informative post for jquery, i have learn by this post thanks
sarah
Hi, all this is awsome!!!
I have a question, for the Image replacement gallery, can I make it, instead of img for example div with some images and text inside?
this is very good man. help me a lot as I’m beginner
This is very good for beginner
I like very much
Very nice and useful tutorials to web designers but i have one question are these worked in all browsers specially in internet explorer.
Excelentes ejemplos de Jquery, me gusto mucho tu post, ya está en mis favoritos.
Saludos.
Exactement ce que je cherchais, apprendre JQuery par l’exemple, que du bon !
merci pour ce tuto qui permet vraiment d’y voir plus clair :)
Hello Webmaster,
I visited your web site earlier today and firstly wanted to congratulate you on the appearance, excellent content and accessibility I discovered there. It is not often I come across a web site that offers such a positive user experience and great information too.
At this present moment, I am seeking meaningful links from quality websites just like yours, for a current project on behalf of http://www.nextpinnace.com. As you’ll see, this is based upon a similar theme to yours and does in my view, offer added value content for web site visitors.
Now as a part of this promotional activity, I would very much like to have a link featured on your website. Should you be agreeable, please use the following details to add the project site to your links page.
Title: Directory Submission
URL: https://www.nextpinnacle.com/
Description: Nextpinnacle offers Manual Directory Submission Service. All submission are manual with due care to top, SEO friendly; free Directories with Quality submission report!
If you have any questions or concerns, please don’t hesitate in contacting me by replying to this email. I will then get back to you as soon as possible.
Thanks and Regards,
Linking Manager
Parabéns !!
adorei, aprendi muito com esses tutoriais.
It’s hard to find an accordion tutorial that doesn’t use a ul – your’s was just what I needed. Thanks!
What an amazing post… It’s like you just pull mad jquery skills out of your ass on cue… I envy you, sir ;-)
I was looking for one site which can teach jquery for beginners ,finally I found an amazing site and keep posting such great articles.
interesting and can get lots of info from here..
Keep the good work coming.
Thanks.
Aidan
FreeWebsiteDesign
hii.. i have try this code but it is not working properly can some one help me…
$(document).ready(function(){
$(“#radio”).change(function () {
$(“#table1”).show();
})
$(“#radio1”).change(function () {
$(“#table1”).hide();
})
});
testing for jquery on change
show there filed1
show there filed12
show there filed13
Now place reaming text here
I hope i will get any reply
Such a great set of tutorials – so easy to follow and you explain each step! Thanks so much for your time and hard work on these!
This is a good tutorial.
And, If someone can provide the complete list of JQuery functions, that will be very helpful.
Wow! it was really a nice visual effects. Maybe you can show me some of those effects implemented in a real application. Sometimes I find it more problematic if you are going to implement it in a full blown application.
It was really nice and thanks for those sample implementation using JQuery. Also, they are releasing the next version of JQuery 1.4. Still not tested yet, but maybe you can show me some of those newly update for JQuery. Thank you very much.
Once again, Nick sets himself apart from the rest. I don’t know why I don’t just start; I end-up here so often. Thanks Nick.
Help. I am a Complete Jquery Novice, and I have never written a single line of code.
But I do want to add 1 thing to a jquery that is in a website that I am trying to modify.
The site has several accoardians within it, and I want to write a simple “ready” function that will CLOSE all of them at load time.
Would someone be kind enough to show me how to do this. Each one of them has a HREF=# associated with them.
Below is my sad, and failing, attempt to code this:
=========================
$(document).ready(function() {
$.each(
[“grid”, “paragraphs”, “blockquote”, “list-items”, “section-menu”, “tables”, “forms”, “login-forms”, “search”, “articles”, “accordion”],
function() {
$(id=”#”: this) );
$(“[id=’toggle-“+this+”‘]”).bind(“ready”,function(e){
$(this.slideUp) ;
};
e.preventDefault();
});
I’m sure that I have something simple (like knowledge) preventing me from getting this right.
Thank you in advance,
Sei
Sei, can’t u just try to run your page with display:hidden for div elements contains content of your accordion? For example:
Show my accordion
Your content
then on:
$(document).ready(function(){
$(‘#clicker’).toggle(function(){
$(‘#showme’).css(‘display’,’block’).animate({ height: 300 },500);
},
funciton(){
$(‘#showme’).animate({ height: 0},500);
setTimeout(function(){
$(‘#showme’).css({ ‘display’,’hidden’}); },500);
});
});
Hope it’ll help, or point you on right way of thinking about your problem :)
Is there a way that you can take number 4a or 4b and make it so that the last panel that opens stays open? For example, I have a menu with 12 sub menus and want them to stay open as your browse each section. Anyone know how to fix?
The designs showed here show what simple and tasteful design is all about. Another one to consider
Excellent, the hover example was incredibly useful in building a small, flexible information popup for a custom gallery that I was building. Thanks for sharing it, along with the other jQuery examples.
Hi
Really nice! I’ve got one perfection for point 5.a and 5.b.
If you go over the links many times in a short period of time, it loads every single hover-effect u’ve gone over..
In the CSS: em {opacity: 0;}
$(document).ready(function(){
$(“.menu a”).hover(function() {
$(this).next(“em”).stop().animate({‘opacity’: 1, top: “-75”}, 350);
}, function() {
$(this).next(“em”).stop().animate({‘opacity’: 0, top: “-85”}, 250);
});
I added the “.stop” in front of the “.animate({…)”. Now, this shouldn’t happen anymore.
greez james
hi
u really provide nice tutorials..
thnx
for more jquery tutorials please visit arvind-07.blogspot.com
Hi, this is an awesome article. I had a quick question. How would I make that slide box you have in the first example so it will be on top of other items. I don’t want it to move the entire page down. I tried position Absolute, however that didn’t work.
How do i add this animated hover effect into my design layout?
Great set of tutorials. Just a note for people using the tooltips. If you place .stop(true, true) before the animation function it will stop the hover animation from repeating if you roll your mouse over it multiple times.
Hi there! Great list of tips.
I’m actually designing the simple slide panel. All works with Safari and Chrome, but I don’t know why, my code doesn’t work with Firefox. I’m using jQuery 1.3.2, but I don’t think it’s the mistake because it works with Safari and Chrome, so I think it comes from my CSS file, but I don’t know where I mistaken.
Is there someone to help me please ?
The online code :
Here is my CSS:
#login_panel {
width: 400px;
margin: auto;
padding: 30px;
background: #cccccc;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
display: none;
}
.slide_btn {
text-decoration: none;
color: #ffffff;
width: 140px;
margin: 0 auto;
padding: 10px;
text-align: center;
background: #ff0000;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
display: block;
}
.slide {
margin: 0; /*NO MARGIN*/
padding: 0; /*NO PADDING*/
}
This was so simple and yet so powerful ,gulped it all at once.thnx
Thank you for writing this tutorial! I am new to JQuery and I am trying to get a handle on what it is and what it can do, your tutorial is a very nice primer! Thank you again! Very nice little effects!
Brilliant tutorial. I am as thick as a piece of 4 x 2 wood covered in phlegm, but even I understood most of it. Woo Hoo no more ‘dumb guy’ comments from my Dad…
Whoa, my father did call me dumb again, but Ill show him! Im gonna JQuery his a*s for that! U wait and see!!
Yes thank you so much for writing in plain english. wow some tutorials sites for jquery would drive you to drink. this has everything you’d need for good basic ui control. THANKS
bEST JQUERY TUTORIAL ON THE NET.
CLEAR, PRECISE AND IMMEDIATELY USEABLE.
THANX FOR SHARING.
PART 2 SOON PLEASE.
THOUGHTS HOSTING:- Domain Name Rs.92/-only, 10Gb space, 100 Email id’s, Rs.2600/-only. And for every domain get FREE extras over 7900/-. *Start Your Own Web Hosting Company Only for Rs.4000/-. visit: http://www.thoughtshosting.com, Contact:9059747833
I was looking for jquery tutorial and found this.
Nicely written tutorial, thanks for sharing nick :)!
Pretty organized fashion in which tutorials are presented. Very nicely done, right to the point with specific examples. Way to go!
How do you get the slide panel to begin closed? Mine always begins open for some reason.
Hi (Alessio) have you got (display:none;) set in your #panel div in the css?
My question is how do you get this to appear over the top of content.
For example I would like this to slide down over my header. Is this a Z-Index Job? If so if somebody has done this with this example and has code I could use that would be great.
Cheers
Dan
Hi Dan, thank you, I’ll have to try that! I think, in answer to your question, that position:absolute should work, haven’t tried it though. Thanks again!
Hi, thanks for the awesome tutorial.
Just a few questions:
I am trying to use multiple instances of the Image ReplacementTutorial on one single page.
I probably have to tweak the javascript because when I click onthe thumbnails of instance 2 or 3 etc; it relaces the large image in instance 1 and NOT instance 2 or3…
what should I do to have several instances to work properly on one singel page??
bonus question for the helpful minds:
i’m trying to reproduce this:
with one large image and three thumbnails.
how do i get the thumbnails to be evenly spaced like in the exemple?
thank you all for your help
fred
Greate tutorial. I was in confusion to learn JQuery(thought its difficult to learn). This tutorial made me to think JQUery is simple but powerfull.
websitereckon.com is a free online service where you can gather information about every website currently registered on the internet. Our software compiles data from various sources in real-time and presents you with a comprehensive report. Members have the ability to rate and write reviews, and we also offer a large selection of handy website related tools.
It is our goal to make the internet a better place for webmasters and consumers. We envision a day when you no longer have to deal with online scams or fraud and have all the information you need to make informed decisions about the online businesses and websites. websitereckon.com is intended for every internet user out there, whether you are a webmaster or simply a normal consumer.
free check your website report: websitereckon.com
Hi,
thanks for the great tutorials. But I´ve got a little problem with the Animated hover effects. Everytime I hover one of the parent elements the appears. That´s ok. But unfortunately it seems to count how often I hover the parent element. And so after hovering for 5 times the appears 5 times. Is there any chance to get rid of that effect?
Thank you very much.
Cheers
Thomas
Thanks SO much! jQuery is great! I’m now designing it into all my projects! it is so powerful along with php & css. Thank you!!!!!
Mimi :-D
Great article! Now I it’s much easier to use jquery, thanks!
This was my first lesson in jQuery when I was learning ages ago. I found it so simple to understand and I still refer back here all the time. Thanks!
I’m getting started with jQuery and find this site from jQuery’s official site. Very helpful and easy to follow
it actually works perfectly on all browsers, my bad, delete those comments if you want please
I’m new to jQuery but your tips are very easy to understand. Most of all I’ve enjoyed the part which teaches how to make the entire block clickable. to my opinion it makes it much faster o browse the website, thanks
Thanks, I’m actually learning more about jQuery :D
Great tutorial n_n
Fantastic – one thing though. I am using the ‘simple slide panel’ – but how do I change it so that when the email is submitted, it goes back to the original page so the reader can keep on reading?
Any ideas would be gratefully received!
Thanks!
Andy
Nice info for jquery beginners there. I like the easy to follow style.
Hello,
Is there any way of hiding alt description popup boxes that appear after some seconds if you hover on a link in IE?
I have found ways of hiding these boxes in images but not in links so far.
Thanks :-)
God save us from IE…
Wow., this is really great. Im diving into the jQuery pool and this stuff is actually easy. I dont know why i waited so long to learn it. Thank you for the tutorials.
Hi! Your tutorials and different design tips are really great and helpful! Thanks a lot! I’m a returning reader and learning : )
I’m a newbie in WP and jQuery and I already have a wordpress template with jQuery and its different functions implemented. The only thing which is not implemented nor customized is the [gallery].
I’d like to post images into my posts just like you showed in the “Image replacement gallery” example, but… (being a wp newbie) I don’t understand how to implement the code you proposed into my template in order to make wordpress show this simple and beautiful gallery (large image + thumbs) instead the default [gallery].
Would you be so kind to help me out to do this?
Thank you very much in advance for your attention!
Nice Tutorial / examples. I have something similar to #9 image replacement that I’m working on. Only difference is, I need a border around the thumb image that is currently being viewed. (Indicator of which image is in view). Any tips?
Hi… i have a problem with “6. Entire block clickable” How I can make the link open “_blank”?
Thanks… great tutos!
Wooow… Succulent piece of cake, Nick!
An goldmine of jQuery tips for great Web Designer… like me :)
but not so savvy JS developer.
Bookmarked at “1st Place Resources”.
Thank you!
I’m so glad I bought web designer mag app for my i pad. The first issue I purchased was about jquery!! I’m so hyped about you guys !!
Love, love the flying box!! How do I purchase or ask questions?
Thank you so much, just what i was looking for.
Is it ok for me to post this on my website, with credit of course.
my website is:
http://www.guideme.co.il
tnx for your great work ! very very usefull
Nice tutorial, tq, im a nubi in jquery framewok
Explained details. Simplify up then I will try to do more.
You made it looks so simple. And with CSS3, you won’t need Flash, at least for “simple” animation.
En verdad eres una chulada, no cualquiera comparte de esa forma lo que aprendio. Mil gracias
Never knew how simple JQuery is to implement! Great tutorial thanx
lots of good effects and nice way of presenting tutorials on how to do jQuery animations! Thanks!
Great tutorials. Or Super Great tutorial. This exemple was just what i was looking for! Super!! Thanks for the great tutorials! =)
i like ur way of teaching and telling about how to use j query
Top class tutorial of JQuery. I really appreciate efforts for giving such kind of tutorials. Thanks!
Thanks for your explanation……this is so great tutorial about JQuery
Thank you SOOO much for simplifying and demystifying the world of JQuery for us designers.
hi, my name is Paloma and i´m a designer just trying jquerys for the first time, i loved you examples, but i had some troubles with de simple slide panel, because i don´t want it in the top of mi site, i want it in a specific div, and it seems it doesn´t work there, is there any sliding panel that you can use without an absolute position?
thanks.
Muchas gracias, la verdad es que es muy util!! pero me gustaria saber como hacer para mostrar una busqueda que hacemos en una web en diferentes secciones del acordeon.Ayuda??? please
Muchas gracias y buen aporte!!!
Can someone please tell me how to delete a file from jquery? It seems to be a secret. I have a browser that I have built with jquery and I cant save files, open files or delete files. I have looked everywhere for the code to do it.
I have a little knowledge of Dojo. Somehow, I think JQuery simpler, yet more entertaining.
Thanks so much for help us, designers, to understand a little of JQuery!
Great!!!
Simple slide panel
This jQuery Panel open when user first click on it, can you tell me how can i reverse the function, i want when my site open in browser, by default slide panel must should be closed (Big) with full height and when user click it than it should be close (Small).
I hope you can understand me and reply to solve my issue.
Thanks
Hi,
Please anybody javascript guru answer my previous comment, i am waiting and :(
Muito legal esse efeito..
Very very good !!! :)
I go to user in my script.
I am planning to use this great accordion effect in a website I am developing, but I get the effect I notice you seem to get as well – which is that the slideDown effect starts off running at the speed set in the code but always snaps open rapidly at the end. It gives a rather unpleasant jerky effect whereas I want it to be silk smooth. I’ve tried using the easing plugin but the last bit of the slideDown still jerks.
Is there a fix?
Mike
I’m so happy that you have posted this here. I’ve been looking for some references for quite a long time already. And every time I try to learn jQuery it just makes me feel sleepy. A blogger recommended this post. 5 hours ago I was trying to learn jQuery overnight. And now, I just made it! I full understood how jQuery works! The only thing left to do now is to explore the jQuery documentation, all the FX and stuff. Thanks so much!
Like the tutorial and awesome looking website, keep up the great work!
Hi
Are there a funksjon to get a button disabled with addClass and removeClass.
input id=”” class=”” value=”” disabled=”disabled”
Problem: The disabled funksjon with css does not work fine in IE
Thanks
The tutorial is so nice to learn. Is it possible to get the full sources of these examples? It will help me learn more things.
if you dont show also the html this cant be called a tutorial but a example. u should submit also the html code
The slide panel is not working for me . I am using jquery-1.3.2.min.js
How would you specify the first H3 to start hidden instead of it showing the p tag
* HTML
* CSS
* PHP
* Javascript
… Oh yea, PHP is more important and is used more often than even Javascript!
Thanks for stopping by,
Stefan Mischook
What makes our video courses stand out?
Rather than trying to teach you every nerd detail about PHP right from the start, we jump into practical and useable PHP as quickly as possible.
Check out our growing collection of PHP video tutorials that includes courses on the basics to more advanced topics like e-commerce and PHP, object oriented PHP, MySQL and much more. * HTML
* CSS
* PHP
* Javascript
… Oh yea, PHP is more important and is used more often than even Javascript!
Thanks for stopping by,
Stefan Mischook
What makes our video courses stand out?
Rather than trying to teach you every nerd detail about PHP right from the start, we jump into practical and useable PHP as quickly as possible.
Check out our growing collection of PHP video tutorials that includes courses on the basics to more advanced topics like e-commerce and PHP, object oriented PHP, MySQL and much more.
Thank you so much for this great tutorial!
I’ve read it long time ago when you post it, but so far haven’t started using much jquery on my sites.
Now that I’ve started to use it together with javascript, it gives so much more to the designs.
I just implemented the “Simple slide panel” jquery tutorial on a site I’m developing and looks great.
Happy coding!!
I have a slidepanel sliding above an existing page.
To do this I have defined the DIV as absolute position with a z of 10. Unfortunately, when I do so the links which are “below” the slide panel do not work anymore, even when the panel is out of sight.
Someone with a solution for this ?
Thanks
Henri
If using the “simple slide panel” effect is it possible to have the panel extended when the page loads, then click the button to slide it out of the way? Any help with this would be much appreciated!
Thanks,
Jacob
I would absolutely love to see more of these tutorials. This showed me how easy jquery really is to use!
Hi Henri,
Can you post the code? Maybe I can help. The position should be relative and not fixed for the sliding panel to work.
Love the slide Panel (transition is sweet) and have been playing with it.
I was wondering if you can set up multiple slide panels that detect each others state; so if a panel is open and a different panel is selected it would detect this and close the opened panel before open the new panel? maybe a function that calls for all states to be set to hidden before opening a new panel? (new to JQuery so not too sure how to go about this)
Any help would be much appreciated.
Cheers
It is really help full to me.thanx a lot.
Great work.
I tried this in my code and it works fine. But while testing, I see that in ‘Safari’ the collapsible panels (#7) aren’t working (I didn’t try other examples). Can you please tell me how to make example 7 work in Safari as well.
Thanks!
Please discard my previous comment – I see that it’s also working in ‘Safari’.
Thanks
In collapsible panels, if I have say 5 panels and I want to show only the 3rd one hiding all others, how can I achieve this?
Hi,
I like your panel. It is very nice. But, how can change default position(up to down) on Simple Slide Panel?
Thanks,
O thanks, really great and I especially liked Animated hover effect # 1
Great tutorial!
Please, upgrade the code. The @name selector is deprected in jQuery, removed in jQuery 1.3. For example something that looks like $(“a[@href$=pdf]”).addClass(“pdf”);
must be changed to
$(“a[href$=pdf]”).addClass(“pdf”);
That is all.
noticed the _blank rewite of links dosent work with newer versions of jquery. Can you offer a re-write?
Its a Great tutorials of JQuery. Thank you, Thanx a lot.
These are all really awesome tips. Really appreciate the info.
One question though. Is it possible to make the slide panel slide out from the side, traveling left to right or vice versa?
Hi,
thanks for your tuto ! Is it possible in number 9 to have a “sixth” photo (that will be replaced on clik by one (enlarged) of the small ones below) ?
thanks
Its awsome…. its very easy to learn specially for designer who does not have much scripting knowledge..
nice tutorials,
just wonder if tut # 10 (10. Styling different link types) could be modified like showing a “youtube” icon for every link to youtube-link?
Help is apriciated!
This is what I was looking for! Many many thanks.
Great work! Thanks for guys like you – this is very very nice to have everyging in one place!
Quick question: for the first tutorial how can I have the default position for the expanding panel closed? I know in your example it is but the panel always starts out as open in my site.
Thanks
Wow, thanks for the tutorials. Doesn’t look too hard to do. Now i can try to customise my own effects.
Excellent tutorial about Jquery.
Please Keep adding more..
excellent tutorial explaining the real use of jquery in real world applications.i would like to suggest you to add more jquery functions so that would be very useful .
Hi,
Thanks for the nice script. I was wondering how we can change the position of mouse-over image to left or right.
Thanks,
Praveen
Wow Superb neat Animations and Best of all little lines of code…Nice Article
Thanks very much. This is a good jQuery for me.
Great tutorials. Simple changes and it works great for what I need for!!
it is very good site for beginners how i can get jquery file which i have to download
i have a problem with this :(
if you can help me and give me a good source for j query beginner ?
The slide panel looks so nice and is so useful too, I´m going to try that out to see how it works for my site, thanks a lot.
Excellent tutorial. I really like the “How jQuery works” diagram. Can I suggest you make up some more showing how some of the other jQuery commands/syntax work?
Thanks
Barry
hi!very cool examples!
but I have a question: I’m using the example n.1 (simpy slide panel) but I have multiple panels to open/close in the same page; how can I configure the Jquery code for that? at the moment with multiple panels, the buttons opens always only the first panel.
Thanks,
Alex
Grate work. I am searching for this jquery. Finlay i find it hear. Thanks
I just came across your informative jQuery article. is there a better way of adding “return false” before the close of each function?
I’ve been messing with creating my own carousel which displays in an image viewer onpage but was unsuccesful until now thanks to you.
I just figured out how to do this and I thought some others might be looking as well.
To make the results of the example “Entire Block Clickable” launch in a new window you can assign the href attribute to a variable instead of the “window.location” like this:
$(“.pane-list li”).click(function(){
var fbLink=$(this).find(“a”).attr(“href”);
window.open(fbLink);
return false;
});
This is an amazingly well done tutorial. Very colorful pictures and cool working demos. A tweet is definitely called for and was tweeted. I liked how you style this site with the alternating colored comment headers too. Oh, and a comment preview as I’m typing this. Too cool.
I hope you will keep updating your content constantly as you have one dedicated reader here.
JQuery is rocking!! Thank you very much for the detailed help file.
Greetings
Sajeer Muhammad
Great tutorials!!!
How can I make the simple slide panel goes up instead of down when i first click de button and goes down with a second click?
Thanks!
On Exp 5a:
I’ve noticed that when you rollover the links and the box fades in there’s a blank outline that appears and then goes away. This only happens when I test the code in IE8 & IE7.
HELP!!!
Thanks for this great tutorial! I find myself returning time and time again… probably the best jQuery beginners tutorial on the web.
I am a beginner in Jquery and I loved this tutorial :)
Thanks a lot!
i have this code
$(document).ready(function(){
// Add down arrow only to menu items with submenus
$(“.menu > li:has(‘ul’)”).each(function() {
$(this).find(“a:first”).append(“”);
}); });
i have this code to add a image to menus ;now i works on ever page fine except my home page.
can give me some guidance ?
I found a fix. i used
var $j = jQuery.noConflict();
and used “$j” in place of the “$ ”
Hope someone can be helped by this
thanks
In
5b. Animated hover effect #2
i need to text display on mouse out effect, and then hide when user mouse rollover on next menu.
pls help
I’m new to Jquery and your tutorials are kinda easy to understand, quick question on your Image Replacement Gallery… how hard would it be to add a popup link to the large image for each thumbnail??? that pops up on current page with transparent background…
I have the same problem as Jesse :
On Exp 5a:
I’ve noticed that when you rollover the links and the box fades in there’s a blank outline that appears and then goes away. This only happens when I test the code in IE8 & IE7.
HELP!!!
Any one have a solution?
I love this paper. And I am to read it carefully. I want to translate it in Chinese to help me and other people to know it well. I will paste the Chinese version of the paper on my blog, perhaps I will use your pictures and egs, would you mind it? Thanks a lot.
Thanks for a great tutorial, I love the Simple slide panel, just wondering how to control the position of the slide button, I am trying to align it to the right of my page??
Great tutorials and carefully explained. Keep up the good work !
Thanks for the site. I need to get to grips wiith JQuery to revamp my website and this site had been a great help.
It relies heavily on touch because the pages I have a user acting on, are usually a collection of child records. Caching is a big help in this respect.Thanks
This is one of the great web tutorial the web. Great work!!
People love fashion will always love white iphone 4. Now you can get the advance chance to take the hottest iphone 4 conversion kit. Here we go!
If you want to follow the fashion trend, you can never miss the hottest White iphone 4 Conversion Kit. With smooth and liquidity design, we sure White iphone 4 Conversion Kit is what you want.
This site is a complete world wide web resource for this. You’ll find all you wanted or needed to know, here
cool stuff.I am a total novice in jquery but this is an eye opener.Good job
I tried your Accordian #1, and the only problem I had was to get that pointer image showing, basically i used the same css, javascript code and just tweaked them around, but even if I copy and paste the whole source code the pointer would not show. What can I do please? Can you send me a mail with the answer?
If I got a chance, i will prefer buying the iphone 4 white but not the iphone 4 Black. Who can tell me where is the Best iPhone Cases I would really want to take one. Best iPhone Cases and Covers, Sale iPhone 4 Cases, iPhone 3g Cases and Accessories
I get satisfaction from this site. preserve it up. uggs discount I am content to uncover this short article very beneficial for me, since it consists of whole large amount of information. I whatsoever occasions choose to look at the great quality content materials and also this create a difference I found in you post.
I get satisfaction from this site. preserve it up. Moncler Jackets I am content to uncover this short article very beneficial for me, since it consists of whole large amount of information. I whatsoever occasions choose to look at the great quality content materials and also this create a difference I found in you post.
Tutorials that you have provided are really very helpful for those who are in the designing field. Your post is very descriptive and each thing is explained very well. Good work.
Los Angeles Web Design
Great post! Just what I was looking for to get started in jQuery!
Thanks!
Very nice tutorial. Thank you. Has anyone tried to use jquery cookie with this to save the closed div’s?
Great tutorial. I used a different method. Wondering how to anchor the open items to the top. I have some long copy blocks that open to the middle of the text. I need them to open to the beginning. Maybe yours do, but I can’t tell because of the short copy. If you could lend help, I’d be grateful. Thanks!
Here’s my script:
$(document).ready(function(){
$(‘.details’).hide();
$(‘.header’).click(function() {
$(‘.header’).removeClass(‘open’);
$(‘.details’).slideUp(‘normal’);
if ($(this).next().is(‘:hidden’) == true) {
$(this).addClass(‘open’);
$(this).next().slideDown(‘normal’);
}
});
});
Thanks for these tuts, great job, and they actually work (so many on teh net do not).
Regarding the sliding menu, in combing through the jQuery, CSS, HTML, I’m unable to find a way to make the menu slide teh panel DIv up.
Any ideas?
Disregard my previous post.
Solution to make thie menu slide up:
#panel { height: 144px; width:100%; display: none; position:relative; margin-top:-200px; }
Great Stuff :) , I have get learn lots of information from here ….. Please discuss about about jQuery UI
Thanks for the great list. I am just starting to learn jquery and these will really help along the way. Tutorials seem very good and thorough. Easy to understand. Thanks again!
Nice! Thank you! Have a nice day! ;-)
These are some great tutorials! Thanks for all the hard work. I’ve found a few that I’ve started using already.
You did excellent work and provided very helpful material for about jquery for designers. I am must appreciate your work and bookmark it for my study..
Thanks again for your hard work.
These are some great tutorials! Thanks for all the hard work. I’ve found a few that I’ve started using already.
The way step by step procedure given in this post is really great, it helped me a lot. I was looking for the same kind of tutorial.
Florida Web Design
Is it possible that these tutorials are this good?
I mean…this…is…unreal.
Thanks guys!
Thank you! Great tutorial! :D
I finally learned some jQuery stuff!
:worship:
Please help!
I copy+paste the code into the page but my all layout is moved to the right
Very nice tutorials on jQuery! You explained the details very well! I’ll be using some of these for sure! Great job!
I love the first tutorial. The Simple Slide Panel.
However, can anyone point me in the right direction and get me started on reversing the whole process so I can pull a panel up from the bottom of a page instead of down from the top?
I am impressed with your this article. I was looking to learn about jquery. Your tutorial is awesome source of learning. Keep it up!!
Can somebody please tell me how can I change the simple slide panel so that it’s slides horizontal at the right side of the screen?
Hello,
Thanks for writing basic jquery tutorial as always you did great work specially attachments are very helpful. Keep it up.
One thing i would like to know is, can we find ready made jquery functions since i am jquery beginner.
I will be thankful if you answer my needs.
How can I set this so everything is collapsed, including the first one?
$(document).ready(function(){
$(“.accordion h3:first”).addClass(“active”);
$(“.accordion p:not(:first)”).hide();
$(“.accordion h3”).click(function(){
$(this).next(“p”).slideToggle(“slow”)
.siblings(“p:visible”).slideUp(“slow”);
$(this).toggleClass(“active”);
$(this).siblings(“h3”).removeClass(“active”);
});
});
i like the way it is animated. I am so impressed with this article.
i need to know how to add the panel and close the panel , pls give an idea and output
A good certainly false Louis Vuitton is often a back-firer. That’s the reason you’ll want to consider excellent reproduction shopping bags which function its name in addition to objective from good price ranges.
How can I do using your way to fill the space equally ….. not resize it for each pan.
Best jQuery tutorial ever to start with. thanks again…
is there a way to slide the div from bottom to top?Thanks.
Anyway, great tutorials!two thumbs up.
Wow, I’ve spent a couple of days trying to learn jQuery and struggled to understand how works. I’ve just looked at the first image and it all clicked in the 30 seconds it took to study it.
You have a new deciple ;)
Today, jQuery is the hottest topic of the web programming. Thanx for sharing such a useful post to start with.
INSERT_DEVELOPER_EMAIL_HERE
INSERT_PASSWORD_HERE
INSERT_PUBLISHER_CLIENT_ID_HERE
INSERT_PUBLISHER_SYNDICATION_SERVICE_ID_HERE
#FFFFFF
#000000
#00FF00
#0000CC
#FF3300
728×90
False
DEFAULT
Another questionnaire, the participants’ problem identification and structuring, idea generation, problem elaboration and clarification, such as creativity, problem solving insertion sezkin idea which one’s preferred styles are evaluated. While participants preferred the style of non-disclosure and intellectual development of ADHD, with ADHD, participants chose to produce ideas.
There are some good little tutorials here, thank you for taking the time to break it down for everyone out here learning JQuery.
what a very cool tutorial that u have.. it’s inspire me to learn about jquery. keep up a good work n provide more awesome tutorial for your fans.. hee..^x^
Hey,
supercool tutorial =)
just a suggestion: wont it be better if the hovering arrow is on the right hand side as scrollbars are usually on the right and some people might not have the scroll button/multi touch trackpad to scroll and may drag the scroll bar or use the up/down arrow key, hence its closer to click the hovering up icon from there
thanks again
While participants preferred the style of non-disclosure and intellectual development of ADHD.
Is there a trick to incorporating these into wordpress themes? I have tried using the accordion code in my wordpress and it does not work. Ideas? Suggestions?
Very useful tutorial and a Gr8 start for JQuery..
People you just rock. I will youse your scripts on my site soon to improve the usebility. Thanks so much for this. There is so many things we can do with those scripts. I love jquery and now I do even more. Ii follow You on Twitter and I hope to learn even more soon.
Hi,i see your tutorials,and think you.
I develop applications on android,but i do’t real like the android UI SDK.I want use jQuery in my app.How the performance?and what can i do?
I want talk with you.Mail me.
Thinks again
g8t scripts …… learned alot…. thanks dear……
jquery rocks plz upload more script…
it helps lot who wants to learn jquery quickly
Great Page! Thanks for your code. I use the accordeon for my website http://www.prometrix.de I am so happy. Now each page is very small and can be enlarged with one click!
Great Works Friends!
I hope u become a very expertise developer!
Thanks to all!
hi,
this article finally forced me to learn jquery :)
best way is to write from scratch using this as example
thanks
excellent ,It’s a wonderful job to simplify the learning of jquery
Very neat tutorial. Demo with with each makes it very helpful! keep it up!
Thanx! :)
I am not a programer or coder, but seeing I feel like I can do it!
Thanks for this great, simple and interesting tutorials! U help me understand jQuery capabilities better every day!
we are looking for learn the jquery script..
by
webdesingnig and devlopment
just been looking at this tutorial again (and the demo) and noticed that the 5a and 5b effect does not appear in IE9 when in on its own page. The effect does show on the combined page . Is there a different version of jquery being used? or is there a simple answer I am missing?
hey iam realy happy with this tutorial…you will see some of this effect in my new social networking website…..
This is surely a “one stop – get all about JQuery” tutorial.
Thanks
Awesome tuts!
Regarding Animated hover effect #1 tut:
What’s the trick to getting tooltips vertical aligned? Similar to the menu here: https://about.nike.com/en/mission/focus-areas/sustainability
I figured out how to get the tooltip to animate left, but cannot figure out how to get them aligned with each button. Currently, all tooltips align top of nav & atop each other.
Thx
The trick is CSS;
Hello World!
//Then CSS:
#menuBox .toolTip{
position:relative
position:absolute;
top:50%;
height:10em;
margin-top:-5em;
}
The rest abviously is Jquery.
Remember its not php or asp.
First set your html and css and from there make things in terms of animation dynamic.
Not the other way around.
Cya m8
and good luck.
yeah thanks for this tutorial!
it helps me a lot…
Great Job! ;)
Nice man gj,
Post more of these simple things.
I mean I am an AS2 and 3 programmer and all based on design.
I have a Game development background as an character artist and so I learned to do all dynamics based on the design.
Your tutorials here are good simple and open for own suggestions ,like style and feel.
These tutorials are getting rid of the domination and give you confidence to go on to the intermediate path towards Live-script and Jquery.
Thanx and keep on going!
PS ever thought about putting something on nettuts?
Kind Regards
HappyEverline
Hey Buddy:
I say Excellent job done. To most designers(web .etc), it might seem a little tricky. However, I think this is a path to learn and appreciate what java-developers had tried, especially to simplify and professionalize design . I once read a book stating that .js has nothing to do with java. Then I thought nonsense. How about a real life program written in .js? I mean from scratch, real life windows from jApplets, jAWT. It happened. Moreso, this tut is based on jquery. My fact: .js has everything to do with java.
Thumbs-up!!!
About the “Entire block clickable”. Is it possible to make it so that when the user clicks the block the link will open in an external window?
hi. yes, this is simple. just add the “target” attribute with “_blank” as the value.
hi, please tell me how to set as default the panel collapsed? FIRST DEMO! Please! emergency! Thanks!
How much time do you spend on something like Collapsible panels? Do you work alone or in teams? I’m asking because just started learning jquery framework, and I want to try doing it alone,so I’m wondering how much time, does it take for programmer to build something like this…
How can I make the simple disappearing effect show up only once?
Thanks!
For the image replacement turoial (portfolio one). How could i make it so that i could add some arros to either side, this will be needed if i have more than 5 images to show so then the user can scroll threw more and select an image to display….
Thanks for the tutorial, I am relatively new to jQuery and it was a great help!
However I am having a problem. I am wanting to use several slide down divs on one page but all the slide tabs only activate the one div. Is there a way of assigning each tab to its own panel div? Allowing me to have several slide down divs. Thanks!
Found the answer at http://stackoverflow.com/questions/1792395/multiple-jquery-sliding-panels-on-same-page
Someone seems to of had the same problem with this exact same code!
A very very good tutorial for beginners…
Excellent work hope you also add another Part II of this
Very good, really interesting.
Muy bueno e interesante, muy util para comenzar con JQuery.
hi
excuseme i cant write well english.
how can i send 3parameters(text) from server to client
exsample
i want give 3 parameters name,family,email then send values to client and i see in website
i use only html(notAsp).
thanks
Could you help me? i can’t create button, how i can get button similar with demo..thanks a lot
That’s a slick answer to a challenging qesutoin
how to create hover link included category and tags like yours. could you write tutorial about an example?
I have a question..
Can I make the toggle automatically?
excellent starter guide!!! i search for this information desperately to understand how jQuery knows which HTML tag to take as input….and u r the only one who explained it in a very simple manner as though the student is sitting beside u…. great job!!! keep it up…
Ya This Site Is Very Fruitful For Design People…!
Hats Off To The People Behind This Site…!
Superb tutorial for a beginner like me. Very useful!! Hatsoff guys keep up the good work.
Hi,
Thanks for these, they’re great! I’m using the image replacement gallery and have got it working fine, I was just wondering though is there any way of making the images fade in when you click the thumbnail rather than just jumping straight in?
Thanks!
Ok nevermind, I worked it out eventually. If anyone else wants the images to fade in add this line of code to the jquery:
$(“#largeImg”).hide().fadeIn(2000);
I put it in straight after $(“.thumbs a”).click(function(){ and if you change the numbers it changes the speed it fades in at (for any other newbies like me)
Great code thanks.
One thing, how do I adjust code to get the div to scroll to the left instead of down?
I used ”1. Simple slide panel”.
Thanks for sharing. but any way i am going to get my own book of jquery
Hi, its realy superb…
can u post some more tutorials about jquery,its very useful….
hi.
great tutz. so ive would like to use this Accordion #1. is there anyway i can add pictures and li inside? only the is hiding. please help.
only the text is hiding. i would like to add picture and list, not just text.
Thanks so much. You’re kinda the reason I started using jQuery.
Thanks again.
S
This site is awesome. Keep up the good work
this site is awesome really really good word ……. thanks a lot for this type of work
This web site is rely Awesome. This page gave me strong concepts about Jquery
Thanks
Hello, I have a question to the: Simple slide panel
How can I slide/open that panel to the right oder left side?
i need in http://www.dreem2000.net
make as this comment system
It is helpful i love it.
Can i get the video totorial to help me ean more on web design work?
Really Gud Work!
Thanks to all friends!
Hereafter if your creates any simple jquery cases! plz update to all and me toooo!!!!
Really awesome site!! I have came across a number of jquery tutorial sites, but most were either dificult to understand or too basic in detail. The tutorails were classy, innovative and easy to understand. Great Job!!
The website is fantastic and the tutorials well explained. Sky is the limit for all what jQuery can do. Well done.
Stephen Olayemi
After many, many , many hours searching and trying different things I finally stumbled across your site. I have never used jQuery before and was trying to find a way of displaying a gig poster on my band website when a user hovered over the gig name in the gig guide. I used your Animated Effect #1 and changed the animation to show(), hide(). IT WORKED!!! You rock my friend well done.
This site is very useful who are the learning jquery from begin.
This is one of the best (and easy) explanations of Jquery I’ve found for us mortals (designers)… more please! :) thanks for this.
Thank you very much for coming up with such an interactive jquery website
How would one go about implementing this into WordPress, to appear at the top of the page as a Widget-ready element (sidebar)?
Thank you!
hi, first off thanks so much for posting these tutorials!!very very helpful!
I just have a question about the chainable transition effects tutorial.
you put .animate({opacity: “0.1”, left: “+=400”}, 1200 as part of the code.
I was wondering why you need to put “+=400” when “400” does the same job?
Also what does += mean??
This is probably a really dumb question, but I am very new to this and wish to get a good understanding of everything I am doing.
Thanks a lot :o)
Hi,
Great website you have here.
One question. How can i make two ‘Simple slide panel’ beside each other?
I have tried this but it doesn’t work:
$(“.btn-slide”).mouseover(function(){
$(“#panel”).slideToggle(“slow”);
$(this).toggleClass(“active”); return false;
});
$(“.btn-slide1”).mouseover(function(){
$(“#panel1”).slideToggle(“slow”);
$(this).toggleClass(“active1”); return false;
});
And using two style sheets, one for each slide panel
is it free to use in commercial projects
I just have a question about the chainable transition effects tutorial.
you put .animate({opacity: “0.1″, left: “+=400″}, 1200 as part of the code.
I was wondering why you need to put “+=400″ when “400″ does the same job?
Also what does += mean??
This is probably a really dumb question, but I am very new to this and wish to get a good understanding of everything I am doing.
This web site is rely Awesome. This page gave me strong concepts about Jquery
Thanks!
i’m having html table that binded data from sql server using jquery.how do i make Id cell as editable and Remark cell as dropdown and if update button clicked the editable value be saved to database and reset button clicked the old value will be display in asp.net.give solution
Thank you, I’ve just been searching for information about this subject for ages and yours is the best I’ve found out so far. But, what about the bottom line? Are you sure in regards to the source?|What i do not realize is in reality how you’re no longer really a lot more neatly-preferred than you may be right now. You’re so intelligent.
What i do not realize is in reality how you’re no longer really a lot more neatly-preferred than you may be right now. You’re so intelligent.
Your post has pass the time test, 5 years later (in code development that’s a century) and still relevant and useful. Thanks & good luck!
I’ve found out so far. But, what about the bottom line? Are you sure in regards to the source?|What i do not realize is in reality how you’re no longer really a lot more neatly-preferred than you may be right now. You’re so intelligent.
This post is a very helpful especially for newbie in jquery like me. Thanks for posting.
This is such an innovative idea that feeds my brain, although it doesn’t look too simple for me. I am a newbie jquery user too so this is a fresh juice for my day. I have been exploring web designing for weeks now and these tutorials are definitely of great help.
Well. Great job. Simply but powerfull. Like JQUERY: write less, do more.
hi
this is very useful code for me
i needed it badly
thanks for sharing